 <template>
 	<view>
 		<!-- 搜索框 -->
 		<view class="top">
 			<u-search shape="square"></u-search>
 		</view>
 		<view class="box">
 			<ul class="left">
 				<li v-for="(item,index) in list">{{item.catename }}</li>
 			</ul>
 			<view class="right" v-for="(item,index) in list">
 				<view class="right1" @click="goList(item.id)">
 					{{item.catename }}
 				</view>
 				<view class="box1">
 					<view class="right2" v-for="(item1,index1) in item.children">
 						<image :src="$baseUrl + item1.img"></image>
 						<view>{{item1.catename}}</view>
 					</view>
 				</view>
 			</view>
 		</view>
 	</view>
 	</view>
 </template>


 <script>
 	export default {
 		data() {
 			return {
 				list: []
 			}
 		},
 		onLoad() {
 			this.getCates()
 		},
 		methods: {
 			// 去列表页
 			goList(id) {
 				uni.navigateTo({
 					url: '/pages/list/list?id=' + id
 				})
 				// console.log(index);
 			},
 			// 获取数据
 			getCates() {
 				this.$http({
 					url: "/api/getcates"
 				}).then((res) => {
 					console.log(res)
 					this.list = res.data.list
 				})
 			}
 		}
 	}
 </script>


 <style lang="scss">
 	* {
 		margin: 0;
 		padding: 0
 	}

 	.top {
 		margin-top: 50rpx;
 		margin-left: 20rpx;
 		margin-bottom: 30rpx;
 	}

 	.left li {
 		border: 1rpx solid red;
 		margin: 30rpx 50rpx 0 0;
 		width: 100%;
 		height: 100rpx;
 		text-align: center;
 		list-style: none;
 		line-height: 100rpx;
 		font-size: 35rpx;
 	}

 	.right2 image {
 		width: 150rpx;
 		height: 150rpx;
 		border-radius: 50%;
 	}

 	.right2 {
 		width: 200rpx;
 		height: 200rpx;
 		text-align: center;
 	}

 	.left {
 		width: 30%;
 		height: 1000rpx;
 	}

 	.right {
 		width: 70%;
 		height: 1000rpx;
 		display: flex;
 	}

 	.box {
 		display: flex;
 	}

 	.box1 {
 		width: 70%;
 		height: 300rpx;

 	}
 </style>